<template>
	<view class="prizeComment">
		<view class="prizeOneBox flex">
			<image src="https://cdn.uviewui.com/uview/album/4.jpg"></image>
			奖品评价
		</view>
		<view class="textareaBox">
			<textarea v-model="comment" placeholder="快来评价奖品吧~" style="color: #333;"></textarea>
			<view class="imgBox">
				<image v-for="(item,i) in imgList" :src="item" @longpress="delectImg(i)" @click="previewImg(item)">
				</image>
				<image v-if="imgList.length<4" src="https://wx.2024csnl.com/static/mine/pic.png" @click="chooseFile()"></image>
			</view>

		</view>
		<view class="submitBtn flex" @click="onSubmit">发布</view>

	</view>
</template>

<script>
	import {
		evaluationOfPrizes
	} from "../../api/index.js"
	export default {
		data() {
			return {
				imgList: [],
				comment: '',
				id: '',
				pageType: '',
				isAgency: getApp().globalData.isAgency,
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.pageType = opt.pageType

		},
		methods: {
			async onSubmit() {
				if (this.comment == '') {
					this.showToast('请填写奖品评价')
					return
				}
				if (this.imgList.length == 0) {
					this.showToast('请上传至少一张奖品图片~')
					return
				}
				const res = await evaluationOfPrizes('s=/ApiChoujiang/comments', {
					rid: this.id,
					speechs: this.comment,
					pics: this.imgList.join(',')
				})
				const {
					msg,
					status
				} = res.data
				this.showToast(msg)
				if (status == 1) {
					this.goBack(2000)
				}

			},
			//点击预览图片
			previewImg(current) {
				uni.previewImage({
					current,
					urls: this.imgList,
					loop: true,
					indicator: "default"
				})
			},
			// 删除
			delectImg(i) {
				uni.showModal({
					title: '提示',
					content: '确定要删除照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(i, 1)
						}
					}
				})
			},
			//上传图片
			async chooseFile() {
				uni.chooseImage({
					count: 4,
					sourceType: ['album'],
					success: (res) => {
						// console.log(res, "----11")
						uni.showLoading({
							title: '上传中...'
						})
						res.tempFilePaths.forEach(item => {
							this.upImg(item)
						})
						// this.upImg(res.tempFilePaths[0])
					}
				});
			},
			upImg(path) {
				let BASE_URL = getApp().globalData.BASE_URL
				let platform = 'app'
				// #ifdef H5
				if (this.isAgency) {
					platform = 'h5'
					BASE_URL = '/api'
				}
				// #endif
				uni.uploadFile({
					url: `${BASE_URL}?s=/ApiImageupload/uploadImg&aid=1&platform=${platform} `,
					filePath: path,
					name: 'file',
					// #ifndef H5
					header: {
						'content-type': 'multipart/form-data'
					},
					// #endif
					success: (res) => {
						console.log(res, "上传成功")
						const data = JSON.parse(res.data);
						console.log(data, "data上传成功")
						const {
							msg,
							status,
							url
						} = data
						if (status == 1) {
							this.imgList.push(url)
						}
						uni.hideLoading();
					}
				});
			},


		}
	}
</script>

<style lang="scss" scoped>
	.textareaBox {
		min-height: 500rpx;
		position: relative;
		margin-top: 20rpx;
		background: #F7F7F7;

		.imgBox {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 15rpx;
			position: absolute;

			bottom: 30rpx;
			left: 30rpx;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;

			}
		}
	}

	.submitBtn {
		margin: 117rpx 0;
		color: #fff;
		font-size: 34rpx;
		background: #41644A;
		border-radius: 14rpx;
		padding: 20rpx 0;
		justify-content: center;
	}


	textarea {
		border-radius: 30rpx;
		height: 250rpx;
		width: 91%;
		padding: 31rpx;
		color: #B3B3B3;
		background: #F7F7F7;
		font-size: 32rpx;
	}

	.prizeComment {
		padding: 20rpx 30rpx;
	}

	.prizeOneBox {
		align-items: center;
		color: #333;
		font-size: 32rpx;
		font-weight: 500;

		image {
			width: 100rpx;
			height: 100rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin: 0 45rpx 0 20rpx;
		}
	}
</style>
